<!-- 403权限错误页面组件 - 处理访问权限不足的情况 -->
<template>
    <!-- 403错误页面容器 -->
    <div class="forbidden-page">
        <!-- 错误内容容器 -->
        <div class="error-content">
            <!-- 403图标区域 -->
            <div class="error-icon">
                <el-icon>
                    <Lock />
                </el-icon>
            </div>

            <!-- 错误标题 -->
            <h1 class="error-title">403</h1>

            <!-- 错误副标题 -->
            <h2 class="error-subtitle">访问被拒绝</h2>

            <!-- 错误描述 -->
            <p class="error-description">
                抱歉，您没有权限访问此页面。
                <br>
                请确认您已登录并具有相应的访问权限。
            </p>

            <!-- 权限检查区域 -->
            <div class="permission-check">
                <h3 class="check-title">权限检查</h3>
                <div class="check-items">
                    <div class="check-item" :class="{ 'success': isLoggedIn }">
                        <el-icon>
                            <component :is="isLoggedIn ? 'Check' : 'Close'" />
                        </el-icon>
                        <span>用户登录状态</span>
                    </div>
                    <div class="check-item" :class="{ 'success': hasRequiredRole }">
                        <el-icon>
                            <component :is="hasRequiredRole ? 'Check' : 'Close'" />
                        </el-icon>
                        <span>所需权限: {{ requiredRole || '普通用户' }}</span>
                    </div>
                    <div class="check-item" :class="{ 'success': hasValidToken }">
                        <el-icon>
                            <component :is="hasValidToken ? 'Check' : 'Close'" />
                        </el-icon>
                        <span>访问令牌有效性</span>
                    </div>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <!-- 登录按钮 -->
                <el-button type="primary" @click="goLogin" class="login-btn">
                    <el-icon>
                        <User />
                    </el-icon>
                    立即登录
                </el-button>

                <!-- 返回首页按钮 -->
                <el-button @click="goHome" class="home-btn">
                    <el-icon>
                        <House />
                    </el-icon>
                    返回首页
                </el-button>

                <!-- 联系管理员按钮 -->
                <el-button @click="contactAdmin" class="admin-btn">
                    <el-icon>
                        <Message />
                    </el-icon>
                    联系管理员
                </el-button>
            </div>

            <!-- 帮助信息区域 -->
            <div class="help-info">
                <h3 class="help-title">需要帮助？</h3>
                <div class="help-options">
                    <div class="help-option">
                        <el-icon>
                            <QuestionFilled />
                        </el-icon>
                        <span>查看权限说明</span>
                    </div>
                    <div class="help-option">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>阅读使用指南</span>
                    </div>
                    <div class="help-option">
                        <el-icon>
                            <Service />
                        </el-icon>
                        <span>联系技术支持</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理和生命周期管理
 */
import { ref, computed, onMounted } from 'vue'

/**
 * 导入Vue Router
 * @description 用于页面导航和路由信息获取
 */
import { useRouter, useRoute } from 'vue-router'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import {
    Lock,
    User,
    House,
    Message,
    Check,
    Close,
    QuestionFilled,
    Document,
    Service
} from '@element-plus/icons-vue'

// ==================== 响应式数据 ====================

/**
 * 用户登录状态
 * @description 检查用户是否已登录
 */
const isLoggedIn = ref<boolean>(false)

/**
 * 用户角色
 * @description 当前用户的角色信息
 */
const userRole = ref<string>('')

/**
 * 所需权限角色
 * @description 访问此页面所需的权限角色
 */
const requiredRole = ref<string>('')

/**
 * 访问令牌有效性
 * @description 检查用户的访问令牌是否有效
 */
const hasValidToken = ref<boolean>(false)

// ==================== 计算属性 ====================

/**
 * 检查用户是否具有所需权限
 * @description 根据用户角色和所需权限进行判断
 */
const hasRequiredRole = computed(() => {
    if (!isLoggedIn.value) return false
    if (!requiredRole.value) return true
    return userRole.value === requiredRole.value || userRole.value === 'admin'
})

// ==================== 获取实例 ====================

/**
 * 获取路由实例
 * @description 用于页面导航操作
 */
const router = useRouter()

/**
 * 获取当前路由实例
 * @description 用于获取当前路由信息
 */
const route = useRoute()

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载后的处理
 * @description 检查用户权限状态和设置页面标题
 */
onMounted(() => {
    // 设置页面标题
    document.title = '403 - 访问被拒绝'

    // 检查用户登录状态
    checkUserStatus()

    // 获取所需权限（从路由参数或元信息）
    requiredRole.value = route.meta?.requiredRole as string || ''

    // 记录403错误信息
    console.warn('403权限错误:', {
        path: route.path,
        fullPath: route.fullPath,
        requiredRole: requiredRole.value,
        userRole: userRole.value,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent
    })

    // 可以发送错误到监控服务
    // sendErrorToMonitoring({
    //   type: '403',
    //   path: route.path,
    //   requiredRole: requiredRole.value,
    //   userRole: userRole.value,
    //   timestamp: new Date().toISOString()
    // })
})

// ==================== 权限检查方法 ====================

/**
 * 检查用户状态
 * @description 检查用户的登录状态、角色和令牌有效性
 */
const checkUserStatus = () => {
    // 检查本地存储中的用户信息
    const token = localStorage.getItem('auth_token')
    const userInfo = localStorage.getItem('user_info')

    if (token && userInfo) {
        try {
            const user = JSON.parse(userInfo)
            isLoggedIn.value = true
            userRole.value = user.role || 'user'
            hasValidToken.value = true
        } catch (error) {
            console.error('解析用户信息失败:', error)
            isLoggedIn.value = false
            hasValidToken.value = false
        }
    } else {
        isLoggedIn.value = false
        hasValidToken.value = false
    }
}

// ==================== 交互方法 ====================

/**
 * 跳转到登录页面
 * @description 导航到用户登录页面
 */
const goLogin = () => {
    // 保存当前页面路径，登录后可以跳转回来
    const currentPath = route.fullPath
    router.push({
        path: '/login',
        query: { redirect: currentPath }
    })
}

/**
 * 返回首页
 * @description 导航到网站首页
 */
const goHome = () => {
    router.push('/')
}

/**
 * 联系管理员
 * @description 跳转到联系页面或显示管理员联系方式
 */
const contactAdmin = () => {
    // 跳转到联系页面
    router.push('/contact')

    // 或者可以显示一个对话框
    // ElMessageBox.alert(
    //   '请联系管理员获取访问权限：\n\n邮箱: admin@example.com\n电话: 400-123-4567',
    //   '联系管理员',
    //   {
    //     confirmButtonText: '确定',
    //     type: 'warning'
    //   }
    // )
}
</script>

<style scoped lang="scss">
// 导入403错误页面样式
@use '../../assets/styles/components/errors/_forbidden';
</style>
